<template>
  <el-drawer
    v-model="visible"
    :title="title"
    :size="drawerSize"
    :before-close="closeDrawer"
    direction="rtl"
    custom-class="requirement-drawer"
  >
    <div class="requirement-editor">
      <div class="editor-header">
        <div class="header-content">
          <h3>编辑详细需求</h3>
          <span class="subtitle">调整大模型生成的需求描述，使其更符合您的期望</span>
        </div>
        <el-tag type="info" effect="light" class="markdown-hint">
          <el-icon><InfoFilled /></el-icon>
          <span>支持 Markdown 格式</span>
        </el-tag>
      </div>
      
      <div class="editor-tabs">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="编辑" name="edit">
            <div class="editor-body">
              <el-input
                v-model="editContent"
                type="textarea"
                :rows="22"
                placeholder="在此编辑需求内容..."
                resize="none"
                class="requirement-textarea"
                @keydown.tab.prevent="handleTab"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="预览" name="preview">
            <div class="preview-body">
              <markdown-renderer :content="editContent" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      
      <div class="editor-footer">
        <el-button @click="closeDrawer" class="cancel-btn">
          <el-icon><Close /></el-icon>
          <span>取消</span>
        </el-button>
        <el-button type="primary" @click="confirmEdit" class="confirm-btn">
          <el-icon><Check /></el-icon>
          <span>确认修改</span>
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import MarkdownRenderer from './MarkdownRenderer.vue';
import { InfoFilled, Close, Check } from '@element-plus/icons-vue';

// 接收的属性
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  content: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '编辑需求'
  }
});

// 向父组件触发的事件
const emit = defineEmits(['update:modelValue', 'confirm']);

// 编辑内容
const editContent = ref('');
const activeTab = ref('edit');

// 监听抽屉显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

// 根据屏幕尺寸设置抽屉宽度
const drawerSize = computed(() => {
  return window.innerWidth < 768 ? '90%' : '65%';
});

// 监听content变化，更新编辑内容
watch(() => props.content, (newVal) => {
  editContent.value = newVal;
}, { immediate: true });

// 监听抽屉打开状态，切换到编辑模式
watch(() => visible.value, (isVisible) => {
  if (isVisible) {
    activeTab.value = 'edit';
  }
});

// 处理Tab键插入
const handleTab = (e) => {
  // 在光标位置插入两个空格
  const start = e.target.selectionStart;
  const end = e.target.selectionEnd;
  const text = editContent.value;
  editContent.value = text.substring(0, start) + '  ' + text.substring(end);
  // 设置光标位置
  setTimeout(() => {
    e.target.selectionStart = e.target.selectionEnd = start + 2;
  }, 0);
};

// 关闭抽屉
const closeDrawer = () => {
  visible.value = false;
};

// 确认编辑
const confirmEdit = () => {
  emit('confirm', editContent.value);
  closeDrawer();
};
</script>

<style>
.requirement-drawer .el-drawer__header {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.requirement-drawer .el-drawer__body {
  padding: 0;
  overflow: hidden;
}
</style>

<style scoped>
.requirement-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #f8fafc;
  border-bottom: 1px solid #ebeef5;
}

.header-content {
  display: flex;
  flex-direction: column;
}

.editor-header h3 {
  margin: 0 0 6px 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.subtitle {
  color: #909399;
  font-size: 14px;
}

.markdown-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.editor-tabs {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editor-tabs :deep(.el-tabs) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.editor-tabs :deep(.el-tab-pane) {
  height: 100%;
}

.editor-body, .preview-body {
  height: 100%;
  overflow: auto;
  padding: 0;
}

.requirement-textarea {
  height: 100%;
}

.requirement-textarea :deep(.el-textarea__inner) {
  height: 100%;
  padding: 16px 20px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.6;
  border: none;
  border-radius: 0;
  resize: none;
}

.preview-body {
  padding: 16px 20px;
  background-color: #fff;
}

.editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background-color: #f8fafc;
  border-top: 1px solid #ebeef5;
}

.cancel-btn, .confirm-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 20px;
}

.confirm-btn {
  padding: 10px 24px;
}
</style> 